<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.min.js"></script>
  <script src="./js/react-dom.min.js"></script>
  <script src="./js/babel.js"></script>
</head>
<body>
  <div id="example"></div>
    <script type="text/babel">
        class MyComponent1 extends React.Component {
          render() {
            let arr = this.props.arr
            return (
              <div>
                  {
                    arr.map((item,index) => {
                      return <Welcome key={index} name={item}/>
                    })
                  }
              </div>
            )
          }
        }
        function Welcome(props) {
          return <h3>{props.name}</h3>
        }
        let arr = ['js','html','css']
        ReactDOM.render(<MyComponent1 arr={arr}/>, document.getElementById('example'))

    </script>
</body>
</html>